<template>
  <div class="page-container">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-6">
      <div>
        <h1 class="page-title">冥币管理</h1>
        <div class="breadcrumb-container">
          <router-link to="/" class="link link-hover">首页</router-link>
          <span class="mx-2">/</span>
          <span>冥币管理</span>
        </div>
      </div>
      <div class="btn-group">
        <button class="btn btn-primary gap-2" @click="handleMint">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd" />
          </svg>
          铸造冥币
        </button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-container grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div class="stat bg-base-100 shadow-lg">
        <div class="stat-figure text-primary">
          <div class="w-16 h-16 relative">
            <div class="absolute inset-0 bg-primary/20 rounded-full animate-ping"></div>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 relative z-10 text-primary" viewBox="0 0 20 20" fill="currentColor">
              <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
        <div class="stat-title">总流通量</div>
        <div class="stat-value text-primary">{{ formatNumber(stats.totalSupply) }}</div>
        <div class="stat-desc">较上月增长 {{ stats.supplyGrowth }}%</div>
      </div>

      <div class="stat bg-base-100 shadow-lg">
        <div class="stat-figure text-secondary">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="stat-title">今日交易量</div>
        <div class="stat-value text-secondary">{{ formatNumber(stats.dailyVolume) }}</div>
        <div class="stat-desc">{{ stats.volumeChange > 0 ? '↗' : '↘' }} {{ Math.abs(stats.volumeChange) }}%</div>
      </div>

      <div class="stat bg-base-100 shadow-lg">
        <div class="stat-figure text-accent">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" viewBox="0 0 20 20" fill="currentColor">
            <path d="M13 7h-2v3H8V7H6v3H4v2h2v3h2v-3h3v3h2v-3h2v-2h-2V7zm-3 2v3H7V9h3z" />
          </svg>
        </div>
        <div class="stat-title">兑换比率</div>
        <div class="stat-value text-accent">1:{{ stats.exchangeRate }}</div>
        <div class="stat-desc">功德:冥币</div>
      </div>

      <div class="stat bg-base-100 shadow-lg">
        <div class="stat-figure text-success">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="stat-title">铸造权限</div>
        <div class="stat-value text-success">{{ stats.mintAuthority }}</div>
        <div class="stat-desc">当前持有者</div>
      </div>
    </div>

    <!-- 实时汇率图表 -->
    <div class="card bg-base-100 shadow-lg mb-6">
      <div class="card-body">
        <h2 class="card-title">实时汇率走势</h2>
        <div class="h-64 relative">
          <!-- 这里可以集成echarts等图表库 -->
          <div class="absolute inset-0 flex items-center justify-center text-base-content/20">
            图表区域
          </div>
        </div>
      </div>
    </div>

    <!-- 交易记录 -->
    <div class="card bg-base-100 shadow-lg">
      <div class="card-body">
        <h2 class="card-title mb-4">交易记录</h2>
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>交易ID</th>
                <th>类型</th>
                <th>数量</th>
                <th>发送方</th>
                <th>接收方</th>
                <th>时间</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="tx in transactions" :key="tx.id">
                <td class="font-mono text-sm">{{ tx.id }}</td>
                <td>
                  <div class="badge" :class="getTypeBadgeClass(tx.type)">
                    {{ getTypeLabel(tx.type) }}
                  </div>
                </td>
                <td>{{ formatNumber(tx.amount) }}</td>
                <td>{{ tx.from }}</td>
                <td>{{ tx.to }}</td>
                <td>{{ formatDate(tx.time) }}</td>
                <td>
                  <div class="badge" :class="getStatusBadgeClass(tx.status)">
                    {{ getStatusLabel(tx.status) }}
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="flex justify-between items-center mt-4">
          <div class="text-sm text-base-content/60">
            共 {{ total }} 条记录
          </div>
          <div class="join">
            <button class="join-item btn btn-sm" :disabled="currentPage === 1" @click="handlePageChange(currentPage - 1)">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
            </button>
            <button class="join-item btn btn-sm">{{ currentPage }} / {{ totalPages }}</button>
            <button class="join-item btn btn-sm" :disabled="currentPage === totalPages" @click="handlePageChange(currentPage + 1)">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 铸造对话框 -->
    <dialog ref="mintDialog" class="modal">
      <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">铸造冥币</h3>
        <form @submit.prevent="handleMintSubmit" class="space-y-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text">数量</span>
            </label>
            <input
              type="number"
              v-model="mintForm.amount"
              placeholder="请输入铸造数量"
              class="input input-bordered"
              :class="{ 'input-error': mintErrors.amount }"
            />
            <label class="label" v-if="mintErrors.amount">
              <span class="label-text-alt text-error">{{ mintErrors.amount }}</span>
            </label>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">接收方</span>
            </label>
            <input
              type="text"
              v-model="mintForm.receiver"
              placeholder="请输入接收方地址"
              class="input input-bordered"
              :class="{ 'input-error': mintErrors.receiver }"
            />
            <label class="label" v-if="mintErrors.receiver">
              <span class="label-text-alt text-error">{{ mintErrors.receiver }}</span>
            </label>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">备注</span>
            </label>
            <textarea
              v-model="mintForm.memo"
              placeholder="请输入备注信息"
              class="textarea textarea-bordered"
              :class="{ 'textarea-error': mintErrors.memo }"
            ></textarea>
            <label class="label" v-if="mintErrors.memo">
              <span class="label-text-alt text-error">{{ mintErrors.memo }}</span>
            </label>
          </div>
        </form>
        <div class="modal-action">
          <button class="btn btn-ghost" @click="closeMintDialog">取消</button>
          <button
            class="btn btn-primary"
            :class="{ loading: isMinting }"
            @click="handleMintSubmit"
          >
            确定
          </button>
        </div>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button>关闭</button>
      </form>
    </dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { formatDate } from '@/utils/date'

// 状态
const stats = reactive({
  totalSupply: 1000000000,
  supplyGrowth: 5.2,
  dailyVolume: 1234567,
  volumeChange: -2.3,
  exchangeRate: 100,
  mintAuthority: '阎罗王',
})

interface Transaction {
  id: string
  type: string
  amount: number
  from: string
  to: string
  time: string
  status: string
}

const transactions = ref<Transaction[]>([
  {
    id: 'TX001',
    type: 'mint',
    amount: 1000000,
    from: '系统',
    to: '地府银行',
    time: '2024-01-15T12:00:00Z',
    status: 'success',
  },
  {
    id: 'TX002',
    type: 'transfer',
    amount: 50000,
    from: '地府银行',
    to: '判官王',
    time: '2024-01-15T11:30:00Z',
    status: 'success',
  },
  {
    id: 'TX003',
    type: 'burn',
    amount: 10000,
    from: '地狱火焰',
    to: '系统',
    time: '2024-01-15T11:00:00Z',
    status: 'success',
  },
])

const currentPage = ref(1)
const total = ref(100)
const totalPages = ref(10)

// 铸造表单
const mintDialog = ref<HTMLDialogElement | null>(null)
const isMinting = ref(false)

interface MintForm {
  amount: number
  receiver: string
  memo: string
}

interface MintErrors {
  amount: string
  receiver: string
  memo: string
}

const mintForm = reactive<MintForm>({
  amount: 0,
  receiver: '',
  memo: '',
})

const mintErrors = reactive<MintErrors>({
  amount: '',
  receiver: '',
  memo: '',
})

// 方法
const formatNumber = (num: number) => {
  return new Intl.NumberFormat().format(num)
}

const getTypeBadgeClass = (type: string) => {
  switch (type) {
    case 'mint':
      return 'badge-primary'
    case 'transfer':
      return 'badge-secondary'
    case 'burn':
      return 'badge-accent'
    default:
      return 'badge-ghost'
  }
}

const getTypeLabel = (type: string) => {
  switch (type) {
    case 'mint':
      return '铸造'
    case 'transfer':
      return '转账'
    case 'burn':
      return '销毁'
    default:
      return '未知'
  }
}

const getStatusBadgeClass = (status: string) => {
  switch (status) {
    case 'success':
      return 'badge-success'
    case 'pending':
      return 'badge-warning'
    case 'failed':
      return 'badge-error'
    default:
      return 'badge-ghost'
  }
}

const getStatusLabel = (status: string) => {
  switch (status) {
    case 'success':
      return '成功'
    case 'pending':
      return '处理中'
    case 'failed':
      return '失败'
    default:
      return '未知'
  }
}

const handleMint = () => {
  mintDialog.value?.showModal()
}

const validateMintForm = () => {
  let isValid = true
  if (!mintForm.amount || mintForm.amount <= 0) {
    mintErrors.amount = '请输入有效的铸造数量'
    isValid = false
  }
  if (!mintForm.receiver) {
    mintErrors.receiver = '请输入接收方地址'
    isValid = false
  }
  return isValid
}

const handleMintSubmit = async () => {
  if (!validateMintForm()) {
    return
  }

  isMinting.value = true
  try {
    // TODO: 调用铸造 API
    await new Promise(resolve => setTimeout(resolve, 2000))
    console.log('Mint currency:', mintForm)
    closeMintDialog()
  } finally {
    isMinting.value = false
  }
}

const closeMintDialog = () => {
  mintDialog.value?.close()
  // 重置表单
  mintForm.amount = 0
  mintForm.receiver = ''
  mintForm.memo = ''
  Object.keys(mintErrors).forEach(key => {
    mintErrors[key as keyof MintErrors] = ''
  })
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  // TODO: 调用分页 API
  console.log('Change page to:', page)
}
</script>

<style scoped>
.stats-container {
  @apply grid grid-cols-1 md:grid-cols-4 gap-4;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
</style>
